<template>
    <div>
        <h2 class="h2"><span>个人现状表</span></h2>
        <div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm information" id="information" accept-charset="UTF-8">
                <el-row :gutter="40">
                    <el-col :span="12">
                         <el-form-item class="select2" label="个人年收入：" prop="B002">
                            <el-select v-model="ruleForm.B002" placeholder="请选择个人年收入(单位：元)">
                                <el-option label="0-10000(元)" value="1"></el-option>
                                <el-option label="10001-30000(元)" value="2"></el-option>
                                <el-option label="30001-50000(元)" value="3"></el-option>
                                <el-option label="50001-120000(元)" value="4"></el-option>
                                <el-option label="120000以上(元)" value="5"></el-option>   
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                         <el-form-item label="住房公积金：" prop="B003">
                            <el-radio-group v-model="ruleForm.B003">
                                <el-radio label="有"></el-radio>
                                <el-radio label="无"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="40">
                    <el-col :span="12">
                         <el-form-item class="select2" label="养老保险：" prop="B005">
                            <el-select v-model="ruleForm.B005" placeholder="请选择养老保险">
                                <el-option label="城乡居民社会养老保险" value="1"></el-option>
                                <el-option label="职工基本养老保险" value="2"></el-option>
                                <el-option label="离退休金" value="3"></el-option>
                                <el-option label="无" value="4"></el-option>
                            </el-select>       
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                         <el-form-item class="select2" label="医疗保险：" prop="B006">
                            <el-select v-model="ruleForm.B006" placeholder="请选择医疗保险">
                                <el-option label="城乡居民基本医疗保险" value="1"></el-option>
                                <el-option label="职工基本医疗保险" value="2"></el-option>
                                <el-option label="公费医疗" value="3"></el-option>
                                <el-option label="商业保险" value="4"></el-option>
                                <el-option label="无" value="5"></el-option>
                            </el-select>       
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="40">
                    <el-col :span="12">
                         <el-form-item class="select2" label="房屋性质：" prop="B007">
                            <el-select v-model="ruleForm.B007" placeholder="请选择房屋性质">
                                <el-option label="无房" value="1"></el-option>
                                <el-option label="自建房" value="2"></el-option>
                                <el-option label="公有住房" value="3"></el-option>
                                <el-option label="经济适用房" value="4"></el-option>
                                <el-option label="廉租房" value="5"></el-option>
                                <el-option label="公租房" value="6"></el-option>
                                <el-option label="商品房" value="7"></el-option>
                            </el-select>       
                        </el-form-item>
                    </el-col>      
                    <el-col :span="12">
                         <el-form-item class="select2" label="社会救助状况：" prop="B004">
                            <el-select v-model="ruleForm.B004" placeholder="请选择社会救助状况">
                                <el-option label="低保" value="1"></el-option>
                                <el-option label="五保" value="2"></el-option>
                                <el-option label="建档立卡贫困户" value="3"></el-option>
                                <el-option label="无" value="4"></el-option>
                            </el-select>     
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-row :gutter="40">
                    <el-col :span="12">
                         <el-form-item class="select2" label="享受国家抚恤补助优抚类别：" prop="B009">
                            <el-select v-model="ruleForm.B009" placeholder="请选择享受国家抚恤补助优抚类别">
                                <el-option label="残疾军人" value="1"></el-option>
                                <el-option label="在乡退伍红军老战士" value="2"></el-option>
                                <el-option label="在乡西路军红军老战士" value="3"></el-option>
                                <el-option label="红军失散人员" value="4"></el-option>
                                <el-option label="在乡复员军人" value="5"></el-option>
                                <el-option label="带病回乡" value="6"></el-option>
                                <el-option label="参战退役" value="7"></el-option>
                                <el-option label="参试退役" value="8"></el-option>
                                <el-option label="60周岁以上农村退役士兵" value="9"></el-option>
                                <el-option label="部分60周岁以上烈士子女" value="10"></el-option>
                                <el-option label="烈属" value="11"></el-option>
                                <el-option label="因公牺牲军人遗属" value="12"></el-option>
                                <el-option label="病故军人遗属" value="13"></el-option>
                                <el-option label="错杀后被平反人员子女" value="14"></el-option>
                            </el-select>       
                        </el-form-item>
                    </el-col>     
                    <el-col :span="12">
                        <el-form-item label="是否悬挂光荣牌：" prop="B010">
                            <el-radio-group v-model="ruleForm.B010">
                                <el-radio label="有"></el-radio>
                                <el-radio label="无"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col> 
                </el-row> -->
                <!-- <el-row :gutter="40">
                    <el-col :span="12">
                        <el-form-item label="悬挂时间：" prop="B011">
                            <el-date-picker v-model="ruleForm.B011" type="date" placeholder="选择悬挂时间"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row> -->
                <el-row>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            ruleForm: { //默认数据
                B001:'',//现就业状况
                B002:'',//个人年收入
                B003:'',//住房公积金
                B004:'',//社会救助状况
                B005:'',//养老保险
                B006:'',//医疗保险
                B007:'',//房屋性质
                B008:'',//享受国家抚恤补助
                B009:'',//享受国家抚恤补助优抚类别
                B010:'',//是否悬挂光荣牌
                B011:''//悬挂时间
            },
            rules: {  //规则
                SS: [ //现就业状况
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                B001:[  //现就业状况
                    { required: true, message: '请填写现就业状况', trigger: 'blur' },
                ],
                B002:[  //个人年收入
                    { required: true, message: '请填写个人年收入', trigger: 'blur' },
                ],
                B003:[  //住房公积金
                    { required: true, message: '请选择住房公积金', trigger: 'blur' },
                ],
                B004:[  //社会救助状况
                    { required: true, message: '请选择社会救助状况', trigger: 'blur' },
                ],
                B005:[  //养老保险
                    { required: true, message: '请选择养老保险', trigger: 'blur' },
                ],
                B006:[  //医疗保险
                    { required: true, message: '请选择医疗保险', trigger: 'blur' },
                ],
                B007:[  //房屋性质
                    { required: true, message: '请选择房屋性质', trigger: 'blur' },
                ],
                B008:[  //享受国家抚恤补助
                    { required: true, message: '请选择享受国家抚恤补助', trigger: 'blur' },
                ],
                B009:[  //享受国家抚恤补助优抚类别
                    { required: true, message: '请选择受国家抚恤补助优抚类别', trigger: 'blur' },
                ],
                B010:[  //是否悬挂光荣牌
                    { required: true, message: '请选择是否悬挂光荣牌', trigger: 'blur' },
                ],
                B011:[  //悬挂时间
                    { required: true, message: '请选择悬挂时间', trigger: 'blur' },
                ],
                A011:[  //请填写手机号码
                    { required: true, message: '请填写手机号码', trigger: 'blur' },
                ],
            },
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                    console.log(this.ruleForm)
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
    components:{
        
    }
}
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
}
.el-row:last-child {
    margin-bottom: 0;
}
</style>